<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Client APP Demo</title>
<link rel="stylesheet"
	href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script
	src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script
	src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.js"></script>
	<script>
        $(document).ready(function() {

            var params = $("#params").val();
            if (!(typeof val === "undefined")){
                params = eval('(' + params + ')');
                jQuery.each(params, function(key, val) {
                    $("#InputsWrapper2").append('<div name="params-region"><label class="col-md-4 control-label" for="param"></label>' +
                        '<input type="text" name="param_key" readonly  placeholder="param_key" value="'+key+'"/>&nbsp;&nbsp;' +
                        '<input type="text" name="param_value" readonly  placeholder="param_value" value="'+val+'"/>&nbsp;' +
                        '<a href="#" id="AddMoreFileBox" class="btn btn-info add2">+</a>'+
                        '<a href="#" class="btn btn-info removeclass2">-</a>'+
                        '</div>');
                });
            }

            var MaxInputs       = 8; //maximum input boxes allowed
            var MaxInputs2       = 8; //maximum input boxes allowed
            var InputsWrapper   = $("#InputsWrapper"); //Input boxes wrapper ID
            var InputsWrapper2   = $("#InputsWrapper2"); //Input boxes wrapper ID
            var AddButton       = $(".add"); //Add button ID
            var AddButton2       = $(".add2"); //Add button ID

            var x = InputsWrapper.length; //initlal text box count
            var x2 = InputsWrapper2.length; //initlal text box count
            var FieldCount=1; //to keep track of text box added
            var FieldCount2=1; //to keep track of text box added

            //$(AddButton).click(function (e)  //on add input button click
            $("body").on("click",".add", function(e){
                if(x <= MaxInputs) //max input box allowed
                {
                    //FieldCount++; //text box added increment
                    //add input box
                    $(InputsWrapper).append('<div name="headers-region"><label class="col-md-4 control-label" for="header"></label>' +
                        '<input type="text" name="header_key" id="'+ FieldCount +'" placeholder="header_key" />&nbsp;&nbsp;' +
                        '<input type="text" name="header_value" id="'+ FieldCount +'" placeholder="header_value" />&nbsp;&nbsp;' +
                        '<a href="#" id="AddMoreFileBox" class="btn btn-info add">+</a>'+
                        '<a href="#" class="btn btn-info removeclass">-</a></div>');
                    x++; //text box increment
                    ++FieldCount; //text box added increment
                }
                return false;
            });

            $("body").on("click",".removeclass", function(e){ //user click on remove text
                if( x > 1 ) {
                    //$(this).parent('label').remove();
                    $(this).parent('div').remove(); //remove text box
                    x--; //decrement textbox
                }
                return false;
            })

            $("body").on("click",".add2", function(e){
                if(x2 <= MaxInputs2) //max input box allowed
                {
                    //FieldCount++; //text box added increment
                    //add input box
                    $(InputsWrapper2).append('<div name="params-region"><label class="col-md-4 control-label" for="param"></label>' +
                        '<input type="text" name="param_key" id="'+ FieldCount2 +'" placeholder="param_key" />&nbsp;&nbsp;' +
                        '<input type="text" name="param_value" id="'+ FieldCount2 +'" placeholder="param_value" />&nbsp;' +
                        '<a href="#" id="AddMoreFileBox" class="btn btn-info add2">+</a>'+
                        '<a href="#" class="btn btn-info removeclass2">-</a></div>');
                    x2++; //text box increment
                    ++FieldCount2; //text box added increment
                }
                return false;
            });

            $("body").on("click",".removeclass2", function(e){ //user click on remove text
                if( x2 > 1 ) {
                    //$(this).parent('label').remove();
                    $(this).parent('div').remove(); //remove text box
                    x2--; //decrement textbox
                }
                return false;
            })

        });
        function submit2(){
            var flag = true;
            var okapi_host = pre_param_form.okapi_host.value;
            var okapi_port = pre_param_form.okapi_port.value;
            var api = pre_param_form.api.value;
            var method = $("#method").find("option:selected").text();
            var header_key = pre_param_form.header_key.value;
            var header_value = pre_param_form.header_value.value;
            //alert(header_key);
			if (okapi_host == null||okapi_host.trim() == ""){
                pre_param_form.okapi_host.style.borderColor="red";
			    flag = false;
			} else {
                pre_param_form.okapi_host.style.borderColor="black";
                //flag = true;
			}
			if (okapi_port == null||okapi_port.trim() == ""){
                pre_param_form.okapi_port.style.borderColor="red";
			    flag = false;
			} else {
                pre_param_form.okapi_port.style.borderColor="black";
                //flag = true;
            }
            if (api == null||api.trim() == ""){
                pre_param_form.api.style.borderColor="red";
                flag = false;
            } else {
                pre_param_form.api.style.borderColor="black";
                //flag = true;
            }
            if (method == null||method.trim() == ""){
                $("#method").css("border","1px solid red");
                flag = false;
            } else {
                $("#method").css("border","1px solid black");
                //flag = true;
            }
            $("input[name='header_key']").each(function(){
                if ($(this).val() == null||$(this).val().trim() == ""){
                    $(this).css("border","1px solid red");
                    //$(this).css({"color":"#888"})
                    flag = false;
                    return flag;
				} else {
                    $(this).css("border","1px solid black");
                    //flag = true;
				}
            });
            $("input[name='header_value']").each(function(){
                if ($(this).val() == null||$(this).val().trim() == ""){
                    $(this).css("border","1px solid red");
                    //$(this).css({"color":"#888"})
                    flag = false;
                    return flag;
                } else {
                    $(this).css("border","1px solid black");
                    //flag = true;
                }
            });

            return flag;
        }
	</script>
</head>
<body>
	<div class="navbar navbar-default">
		<div class="container ">
			<p class="navbar-text">Client APP Demo</p>
		</div>
	</div>
	<div class="container ">
		<div class="row">
			<div class="col-md-9">
				<div class="list-group">
				</div>
				<div class="list-group">
					<div class="list-group-item">
						<form class="form-horizontal" name="pre_param_form" onsubmit="return submit2();"
							action="/create_req_html" method="post" target="_blank">
							<div class="form-group">
								<label class="col-md-4 control-label" for="okapi_host">Okapi Host</label>
								<div class="col-md-4">
									<input name="okapi_host" type="text" placeholder=""
										class="form-control input-md" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-4 control-label" for="okapi_port">Okapi Port</label>
								<div class="col-md-4">
									<input name="okapi_port" type="text"
										class="form-control input-md" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-4 control-label" for="api">资源接口URI</label>
								<div class="col-md-4">
									<input name="api" type="text" placeholder=""
										class="form-control input-md" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-4 control-label" for="method">请求方法</label>
								<div class="col-md-4">
									<select class="form-control input-md" id="method" name="method">
										<option value ="get" name="method">GET</option>
										<option value ="post" name="method">POST</option>
										<option value="put" name="method">PUT</option>
										<option value="delete" name="method">DELETE</option>
									</select>
								</div>
							</div>
							<div class="form-group" id="InputsWrapper">
								<label class="col-md-4 control-label" for="header">请求头</label>
								<div name="headers-region">
									<input type="text" name="header_key" placeholder="header_key" />&nbsp;&nbsp;
									<input type="text" name="header_value" id="1" placeholder="header_value" />
									<a href="#" id="AddMoreFileBox" class="btn btn-info add">+</a>
								</div>
							</div>

							<input type="text" id="params" hidden value='{{params}}'/>
							<div class="form-group" id="InputsWrapper2">
								<label class="col-md-4 control-label" for="param">URL请求行?传参</label>
								<div name="params-region">
									<!--<div name="params-region">-->
										<input type="text" name="param_key" placeholder="param_key" value="sign_method"/>&nbsp;&nbsp;
										<input type="text" name="param_value" placeholder="param_value" value="md5"/>&nbsp;
										<a href="#" class="btn btn-info add2">+</a>
										<a href="#" class="btn btn-info removeclass2">-</a>
									<!--</div>-->
								</div>
							</div>

							<div class="form-group">
								<label class="col-md-4 control-label" for="client_secret">client_secret</label>
								<div class="col-md-4">
									<input id="client_secret" name="client_secret" type="text" placeholder=""
										   class="form-control input-md" />
								</div>
							</div>

							<div class="form-group">
								<label class="col-md-4 control-label" for="body">请求体Body传参</label>
								<div class="col-md-4">
									<textarea name="body" type="text" placeholder=""
											  class="form-control input-md">
									</textarea>
								</div>
							</div>

							<!--<div id="org"></div> //注意:id不能写在button上,js获取不到button的id(可能是我们公司的框架的原因)
							<input type="button" onclick="add();" value="+" />
							<input type="button" onclick="reduce();" value="-" />

							<script type="text/javascript">
                                function add(){
                                    var input1 = document.createElement('input');
                                    input1.setAttribute('type', 'text');
                                    input1.setAttribute('name', 'organizers[]');
                                    input1.setAttribute('class', 'git');

                                    var btn1 = document.getElementById("org");
                                    btn1.insertBefore(input1,null);
                                };

                                function reduce(){
                                    var input1 = document.createElement('input');
                                    input1.setAttribute('type', 'text');
                                    input1.setAttribute('name', 'organizers[]');
                                    input1.setAttribute('class', 'git');

                                    var btn1 = document.getElementById("org");
                                    btn1.insertBefore(input1,null);
                                }
							</script>-->
							<div class="form-group">
								<label class="col-md-4 control-label" for="pre-login-btn"></label>
								<div class="col-md-8">
									<input id="pre-login-btn" name="pre-login-btn" type="submit"
										class="btn btn-default btn-info" value="生成OpenAPI访问资源接口页面"></input>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--<div class="container">
		<div class="row">
			<div class="col-md-9">
				<div class="list-group">
				</div>
				<div class="list-group">
					<div class="list-group-item">
						<form class="form-horizontal" name="pre-login-form"
							  action="/oplogin" method="post" target="_blank">
							<div class="form-group">
								<label class="col-md-4 control-label" for="okapi_host">Okapi Host</label>
								<div class="col-md-4">
									<input name="okapi_host" type="text" placeholder=""
										   class="form-control input-md" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-4 control-label" for="okapi_port">Okapi Port</label>
								<div class="col-md-4">
									<input name="okapi_port" type="text" placeholder="9130" value="9130"
										   class="form-control input-md" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-4 control-label" for="api">资源接口URI</label>
								<div class="col-md-4">
									<input name="api" type="text" placeholder=""
										   class="form-control input-md" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-4 control-label" for="method">请求方法</label>
								<div class="col-md-4">
									<select class="form-control input-md">
										<option value ="get">GET</option>
										<option value ="post">POST</option>
										<option value="put">PUT</option>
										<option value="delete">DELETE</option>
									</select>
								</div>
							</div>
							<div class="form-group" id="InputsWrapper">
								<label class="col-md-4 control-label" for="header">请求头</label>
								<div name="headers-region">
									<input type="text" name="header_key" placeholder="header_key" />&nbsp;&nbsp;
									<input type="text" name="header_value" id="field_1" placeholder="header_value"/>
									<a href="#" id="AddMoreFileBox" class="btn btn-info add">+</a>
									<a href="#" class="btn btn-info removeclass">-</a>
								</div>
							</div>
							<script>
                                $(document).ready(function() {

                                    var MaxInputs       = 8; //maximum input boxes allowed
                                    var InputsWrapper   = $("#InputsWrapper"); //Input boxes wrapper ID
                                    var AddButton       = $(".add"); //Add button ID

                                    var x = InputsWrapper.length; //initlal text box count
                                    var FieldCount=1; //to keep track of text box added

                                    //$(AddButton).click(function (e)  //on add input button click
                                    $("body").on("click",".add", function(e){
                                        if(x <= MaxInputs) //max input box allowed
                                        {
                                            FieldCount++; //text box added increment
                                            //add input box
                                            $(InputsWrapper).append('<div name="headers-region">' +
                                                '<input type="text" name="header_key" placeholder="header_key" />&nbsp;&nbsp;' +
                                                '<input type="text" name="header_value" id="field_'+ FieldCount +'" placeholder="header_value"/>' +
                                                '<a href="#" id="AddMoreFileBox" class="btn btn-info add">+</a>'+
                                                '<a href="#" class="btn btn-info removeclass">-</a></div>');
                                            x++; //text box increment
                                        }
                                        return false;
                                    });

                                    $("body").on("click",".removeclass", function(e){ //user click on remove text
                                        if( x > 1 ) {
                                            $(this).parent('div').remove(); //remove text box
                                            x&#45;&#45;; //decrement textbox
                                        }
                                        return false;
                                    })

                                });
							</script>



							&lt;!&ndash;<div id="org"></div> //注意:id不能写在button上,js获取不到button的id(可能是我们公司的框架的原因)
							<input type="button" onclick="add();" value="+" />
							<input type="button" onclick="reduce();" value="-" />

							<script type="text/javascript">
                                function add(){
                                    var input1 = document.createElement('input');
                                    input1.setAttribute('type', 'text');
                                    input1.setAttribute('name', 'organizers[]');
                                    input1.setAttribute('class', 'git');

                                    var btn1 = document.getElementById("org");
                                    btn1.insertBefore(input1,null);
                                };

                                function reduce(){
                                    var input1 = document.createElement('input');
                                    input1.setAttribute('type', 'text');
                                    input1.setAttribute('name', 'organizers[]');
                                    input1.setAttribute('class', 'git');

                                    var btn1 = document.getElementById("org");
                                    btn1.insertBefore(input1,null);
                                }
							</script>&ndash;&gt;
							<div class="form-group">
								<label class="col-md-4 control-label" for="pre-login-btn"></label>
								<div class="col-md-8">
									<input id="pre-login-btn" name="pre-login-btn" type="submit"
										   class="btn btn-default" value="创建Open API 登录URL"></input>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>-->
	<footer class="footer"></footer>
</body>
<script type="application/javascript">

</script>
</html>
